<template>
  <div element-loading-text="登录中…">
    <h3 class="title" :style="{'font-size':logeTitle.length >= 8 ?'22px':''}">{{logeTitle}}管理后台</h3>
    <div class="tip-error"></div>
    <div class="sign-tab">
     <a
        href="#"
        class="link-signinv"
        :class="[show=='密码登录' ? 'router-link-exact-active' :'']"
        @click.prevent="showTitle('密码登录')"
      >{{isOpen == 1?'短信':''}}密码登录</a>
      <!--  <a
        v-if="isOpen==1"
        @click.prevent="showTitle('短信登录')"
        :class="[show=='短信登录' ? 'router-link-exact-active' :'']"
        class="link-signin"
      >短信登录</a> -->
    </div>

    <PassLogin v-show="show=='密码登录'" class="last_form" :isOpen="isOpen"></PassLogin>
    <!-- <PhoneLogin v-show="show=='短信登录'" v-if="isOpen==1" class="last_form"></PhoneLogin> -->
  </div>
</template>
<script>
import PassLogin from "@/components/login/PassLogin.vue";
import PhoneLogin from "@/components/login/PhoneLogin.vue";
import reg from "@/components/login/reg.vue";
export default {
  props: {
    isOpen: {
      type: String,
      default: "0"
    },
    logeTitle: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      loginInfo: "",
      show: "密码登录"
    };
  },
  methods: {
    showTitle(title) {
      this.show = title;
    }
  },
  created() {
    this.$store.commit("loginOut");
    this.$store.dispatch("getPlugin");
  },
  components: {
    PassLogin,
    PhoneLogin,
    // eslint-disable-next-line vue/no-unused-components
    reg
  }
};
</script>

<style lang="less" scoped>
.title {
  font-weight: 400;
  font-size: 26px;
  line-height: 32px;
  color: #5dd5c8;
  position: relative;
  text-align: center;
}
.tip-error {
  text-align: center;
  color: #fc6c38;
  height: 29px;
  line-height: 18px;
  padding-top: 7px;
}
.sign-tab {
  font-size: 0;
  border-bottom: 2px #f2f5f9 solid;
  white-space: nowrap;
  padding-top: 4px;
  text-align: center;
  a {
    display: inline-block;
    width: 40%;
    font-size: 14px;
    color: #9fa3b0;
    margin: 0 0 -4px;
    height: 36px;
    border-bottom: 2px #fff solid;
    cursor: pointer;
  }
  a.link-signin {
    margin-left: 0;
  }
  a.link.sms {
    text-align: center;
  }
  a.link-scan {
    margin-right: 0;
    text-align: right;
  }
}
.sign-tab + form {
  padding-top: 22px;
}
.last_form {
  color: #9fa3b0;
  text-align: center;
  padding: 28px 0 36px;
  overflow: hidden;
}
.suc {
  color: #ddd;
  text-decoration: underline;
}
.router-link-exact-active {
  border-bottom-color: #62d5c8 !important;
  font-size: 16px !important;
  color: #414a60 !important;
}
.btn_login {
  height: 40px;
  background: #5dd5c8;
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 16px;
}
</style>
